<style>
    #cancel_card_frame td,#cancel_card_frame th {
        padding:5px;
    }
</style>
<article id="cancel_card_frame" style="text-align: center;">
    <div class="lonix frame">
        <div class="lonix frame-title">读卡器</div>
        <div class="lonix frame-content">
            <table style="width: 100%;">
                <thead>
                    <tr>
                        <th style="width: 300px;">设备</th>
                        <th>操作</th>
                        <th style="width: 150px;">状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input  type="text" id="device" /></td>
                        <td><a data-bind="click:check_device">连接设备</a></td>
                        <td><span id="readCardStatus">请先连接设备</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <article style="text-align: center">
        <label style="margin-right: 35px;">
            <input type="radio" name="model_function" value="1" checked />
            手动注销
        </label>
        <label>
            <input type="radio" name="model_function" value="0" />
            自动注销
        </label>
    </article>
    <div class="lonix frame">
        <div class="lonix frame-title">重要信息</div>
        <div class="lonix frame-content">
            <table width="100%">
                <thead>
                <tr>
                    <th>逻辑卡号</th>
                    <th>车主信息</th>
                    <th>车牌</th>
                    <th>通行证类型</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td id="cardno">自动获取</td>
                    <td id="ownerName">自动获取</td>
                    <td id="vehicleNo">自动获取</td>
                    <td id="cardType">自动获取</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <p style="font-size: 18px; margin-top: 35px;">请将卡片放置在读卡器上</p>
    <!--<div style="width:160px;margin:10px auto">-->
        <!--<div style="float:left;line-height:28px;">是否自动</div>-->
            <!--<div class="switch-button" style="width:90px;float:left;">-->
            <!--<div class="checkbox">-->
                <!--<input type="checkbox"/>-->
                <!--<label></label>-->
            <!--</div></div>-->
    <!--</div>-->
    <section style="position: relative; width: 100%;">
        <article id="manual-cancel" style="position: absolute; width: 100%">
            <button class="lonix finish-step" style=" display: inline-block; width: 300px; margin-top: 25px;" data-bind="click:cancel_card">确认注销</button>
        </article>
        <article id="auto-cancel" style="position: absolute; width: 100%; display: none">
            <article style="margin-top: 17px; text-align: left">
                <label>操作记录</label>
                <div id="opa-info" style="width: 100%; height: 120px; resize: none; border-color: #ccc; overflow-y: scroll; background-color: #eee;"></div>
            </article>
        </article>
    </section>
    <div class="lonix button-frame">
        <button class="lonix prev-step" style="margin-top: 10px;" data-bind="click:close_cancel">关闭</button>
    </div>
</article>
<script>
    var cancelCard = new CancelCard($('#cancel_card_frame'));
</script>